<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <link rel="stylesheet" href="./iconfont/iconfont.css">

        <style>

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            li {
                list-style: none;
            }

            .banner {
                width: 564px;
                height: 315px;
                margin: 100px auto;
                overflow: hidden;
                position: relative;
            }

            .banner img {
                width: 564px;
                border-radius: 12px;
                vertical-align: middle;
            }

            .banner ul {
                display: flex;
            }

            .banner .prev, .banner .next {
                display: none;
                width: 20px;
                height: 30px;
                background-color: rgb(0, 0, 0, 0.3);
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                text-decoration: none;
                color: white;
                line-height: 30px;
                text-align: center;
            }

            .banner:hover .prev,
            .banner:hover .next {
                display: block;
            }

            .banner .prev {
                left: 0;
                border-radius: 0 15px 15px 0;
            }

            .banner .next {
                right: 0;
                border-radius: 15px 0 0 15px;
            }


            .banner ol {
                height: 13px;
                background-color: rgb(255, 255, 255, 0.3);
                position: absolute;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                display: none;
                justify-content: space-around;
                border-radius: 10px;
            }

            .banner ol li {
                margin: 3px;
                width: 8px;
                height: 8px;
                background-color: white;
                border-radius: 50%;
                cursor: pointer;
            }

            .banner ol .active {
                background-color: #ff5000;
            }

            .banner:hover ol {
                display: flex;
            }


        </style>


    </head>
    <body>

        <div class="banner">
            <ul>
                <li><a href="#"><img src="images/banner1.jpg" alt="banner"></a></li>
                <li><a href="#"><img src="images/banner2.jpg" alt="banner"></a></li>
                <li><a href="#"><img src="images/banner3.jpg" alt="banner"></a></li>
            </ul>

            <a href="#" class="prev">
                <i class="iconfont icon-zuoce"></i>
            </a>
            <a href="#" class="next">
                <i class="iconfont icon-youce"></i>
            </a>

            <ol>
                <li></li>
                <li class="active"></li>
                <li></li>
            </ol>

        </div>


    </body>
</html>